<template>
  <view class="detail-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <text class="nav-back" @click="goBack">返回</text>
      <text class="nav-title">账单详情</text>
      <text class="nav-edit" @click="editData">编辑</text>
    </view>

    <!-- 详情内容 -->
    <view class="detail-content" v-if="detailData">
      <!-- 基本信息 -->
      <view class="detail-section">
        <view class="section-title">基本信息</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">机主姓名</text>
            <text class="info-value">{{ detailData.jzxm }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{ detailData.zjlxdh }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">身份证号</text>
            <text class="info-value">{{ detailData.sfzh }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">合同编号</text>
            <text class="info-value">{{ detailData.htbh }}</text>
          </view>
        </view>
      </view>

      <!-- 房东信息 -->
      <view class="detail-section">
        <view class="section-title">房东信息</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">房东姓名</text>
            <text class="info-value">{{ detailData.landlordName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">房东电话</text>
            <text class="info-value">{{ detailData.landlordPhone }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">月租金</text>
            <text class="info-value">¥{{ detailData.monthPrice }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">截止日期</text>
            <text class="info-value">{{ detailData.endDate }}</text>
          </view>
        </view>
      </view>

      <!-- 地址信息 -->
      <view class="detail-section">
        <view class="section-title">地址信息</view>
        <view class="info-grid">
          <view class="info-item full-width">
            <text class="info-label">完整地址</text>
            <text class="info-value">{{ getFullAddress(detailData) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">省份</text>
            <text class="info-value">{{ detailData.provinceName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">城市</text>
            <text class="info-value">{{ detailData.cityName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">区县</text>
            <text class="info-value">{{ detailData.districtName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">街道</text>
            <text class="info-value">{{ detailData.streetName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">村/社区</text>
            <text class="info-value">{{ detailData.villageName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">门禁编码</text>
            <text class="info-value">{{ detailData.door }}</text>
          </view>
        </view>
      </view>

      <!-- 业务信息 -->
      <view class="detail-section">
        <view class="section-title">业务信息</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">安装时间</text>
            <text class="info-value">{{ detailData.azsj }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">签约时间</text>
            <text class="info-value">{{ detailData.zssj }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">签约人</text>
            <text class="info-value">{{ detailData.zsry }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">是否在住</text>
            <text class="info-value" :class="getStatusClass(detailData.sfzs)">
              {{ getStatusText(detailData.sfzs) }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">是否电表</text>
            <text class="info-value" :class="getStatusClass(detailData.sfzbmq)">
              {{ getStatusText(detailData.sfzbmq) }}
            </text>
          </view>
          <view class="info-item">
            <text class="info-label">是否验收</text>
            <text class="info-value">{{ detailData.sfys }}</text>
          </view>
        </view>
      </view>

      <!-- 技术信息 -->
      <view class="detail-section">
        <view class="section-title">技术信息</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">机柜ID</text>
            <text class="info-value">{{ detailData.jguid }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">箱柜ID</text>
            <text class="info-value">{{ detailData.xguid }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">门禁编码</text>
            <text class="info-value">{{ detailData.mjbm }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">ADSL接入号</text>
            <text class="info-value">{{ detailData.adsljrh || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">宽带账号</text>
            <text class="info-value">{{ detailData.kdzh }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">宽带密码</text>
            <text class="info-value">{{ detailData.kdmm }}</text>
          </view>
        </view>
      </view>

      <!-- 其他信息 -->
      <view class="detail-section">
        <view class="section-title">其他信息</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">电信反馈</text>
            <text class="info-value">{{ detailData.dxfk }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">房租反馈</text>
            <text class="info-value">{{ detailData.fzfk || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">状态备注</text>
            <text class="info-value">{{ detailData.ztbz || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">质量标签</text>
            <text class="info-value">{{ detailData.zlbq || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">质量报告</text>
            <text class="info-value">{{ detailData.zlbg || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">特殊情况</text>
            <text class="info-value">{{ detailData.tsqk || '无' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-state" v-if="error">
      <text class="error-text">{{ error }}</text>
      <button class="btn-retry" @click="loadDetail">重试</button>
    </view>
  </view>
</template>

<script>
import { getAdslList } from '@/api/door/house'

export default {
  data() {
    return {
      id: null,
      detailData: null,
      loading: false,
      error: ''
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.loadDetail()
    } else {
      this.error = '缺少必要参数'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    editData() {
      // 跳转到编辑页面
      uni.navigateTo({
        url: `/pages/data/edit?id=${this.id}`
      })
    },
    
    async loadDetail() {
      if (!this.id) return
      
      this.loading = true
      this.error = ''
      
      try {
        // 使用简单的查询方式，获取所有数据然后过滤
        const params = {
          pageNum: 1,
          pageSize: 1000
        }
        
        console.log('查询详情参数:', params)
        const response = await getAdslList(params)
        
        if (response.code === 200 && response.rows && response.rows.length > 0) {
          // 在结果中查找匹配的ID
          const targetData = response.rows.find(item => item.id == this.id)
          if (targetData) {
            this.detailData = targetData
            console.log('找到详情数据:', targetData)
          } else {
            this.error = '未找到相关数据'
            console.log('未找到ID为', this.id, '的数据，总共', response.rows.length, '条数据')
          }
        } else {
          this.error = '未找到相关数据'
          console.log('接口返回空数据')
        }
      } catch (error) {
        console.error('加载详情失败:', error)
        this.error = '网络异常，请稍后重试'
      } finally {
        this.loading = false
      }
    },
    
    getFullAddress(item) {
      const { provinceName, cityName, districtName, streetName, villageName, address } = item
      return `${provinceName} ${cityName} ${districtName} ${streetName} ${villageName} ${address}`
    },
    
    getStatusClass(value) {
      if (value === '是') {
        return 'status-normal'
      } else if (value === '否') {
        return 'status-error'
      } else {
        return 'status-unknown'
      }
    },
    
    getStatusText(value) {
      if (value === '是') {
        return '是'
      } else if (value === '否') {
        return '否'
      } else {
        return '未知'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  background-color: #f5f6f7;
  min-height: 100vh;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .nav-back {
    color: #007AFF;
    font-size: 28rpx;
  }
  
  .nav-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .nav-edit {
    color: #007AFF;
    font-size: 28rpx;
  }
}

.detail-content {
  padding: 20rpx;
}

.detail-section {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .info-grid {
    display: flex;
    flex-wrap: wrap;
    
    .info-item {
      width: 50%;
      margin-bottom: 30rpx;
      
      &.full-width {
        width: 100%;
      }
      
      .info-label {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333;
        word-break: break-all;
        
        &.status-normal {
          color: #52c41a;
        }
        
        &.status-error {
          color: #ff4d4f;
        }
        
        &.status-unknown {
          color: #999;
        }
      }
    }
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .loading-text {
    font-size: 28rpx;
    color: #666;
  }
}

.error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .error-text {
    font-size: 28rpx;
    color: #ff4d4f;
    margin-bottom: 30rpx;
  }
  
  .btn-retry {
    background-color: #007AFF;
    color: #fff;
    border: none;
    border-radius: 10rpx;
    padding: 20rpx 40rpx;
    font-size: 28rpx;
  }
}
</style> 